<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <meta name="description" content="">
    <meta name="author" content="https://github.com/Mikadily/poloniexlendingbot">
    <link rel="SHORTCUT ICON" href="images/icon.ico">
    <link rel="icon" href="images/icon32.png" sizes="32x32"/>
    <link rel="icon" href="images/icon48.png" sizes="48x48"/>
    <!-- Android Add To Home Settings -->
    <link rel="manifest" href="manifest.json">
    <link rel="icon" href="images/icon192.png" sizes="192x192" type="image/png">
    <link rel="icon" href="images/icon384.png" sizes="384x384" type="image/png">
    <meta id="theme-color" name="theme-color" content="#e7e7e7">
    <meta name="mobile-web-app-capable" content="yes">
    <!-- iOS Add To Home Settings -->
    <link rel="apple-touch-icon" href="images/icon192.png">
    <link rel="apple-touch-startup-image" href="images/ios_splash.png">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <title>Lending Bot</title>

    <!-- Bootstrap Core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery Version 1.12.2 -->
    <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- toastr -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">

    <script src="lendingbot.js?version=2" ></script>

    <style>
        .brand-margin{
            margin-top:4px;
            margin-bottom:4px
        }

        .inlinediv {
            display: inline-block;
            padding-right: 5%;
            vertical-align: top;
        }
        .plb-tooltip {
            white-space: nowrap;
            text-decoration: none;
            border-bottom: 1px dotted;
            color: black;
        }
        .plb-tooltip:hover {
            text-decoration: none;
        }

        form h5 {
            font-weight: 700;
        }

        form p,
        form h5 {
            margin-bottom: 5px;
        }

        .nav .glyphicon {
            color: black;
        }

        #file,
        #input-file {
            display: none;
        }
    </style>

</head>

<body>
    <!-- Page Content -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">

            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header" style="margin-left:8px">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <img src="images/icon192.png" height="32" width="32" style="margin-top: 8px;margin-right: 8px;margin-left: -15px;vertical-align:top">
                <div style="display:inline-block">
                    <h4 class="brand-margin" id="title">Lending Bot</h4>
                    <h5 class="brand-margin" id="updated">Not updated</h5>
                </div>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right" id="navbar-menu">
                    <li id="file" data-toggle="collapse" data-target=".navbar-collapse.in">
                        <a href="#" onclick="$('#input-file').trigger('click');">
                            <i class="glyphicon glyphicon-file"></i>
                            Select log
                        </a>
                    </li>
                    <li data-toggle="collapse" data-target=".navbar-collapse.in">
                        <a href="#" data-toggle="modal" data-target="#settings_modal">
                            <i class="glyphicon glyphicon-cog"></i>
                            Settings
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <input type="file" id="input-file" name="file" onchange="handleLocalFile(this.files[0])" />

    <div class="container" style="padding-top:50px">
        <div class="row" style="overflow-x:auto">
            <table class="table table-responsive">
                <thead>
                    <tr>
                        <th style="vertical-align: text-top;">Status</th><th style="vertical-align: text-top;" id="status">N/A</th>
                    </tr>
                    <tr>
                        <td style="vertical-align: text-top;padding:0px;" colspan="2" >
                            <table class="table table-striped table-responsive"
                                style="margin:0px"
                                id="detailsTable" >
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <th colspan="2">Log (Reversed ordered):</th>
                    </tr>
                </thead>
                <tbody id="logtable">
                </tbody>
            </table>
        </div>
    </div>
    <!-- /.container -->


    <div class="modal fade" id="settings_modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Settings</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="refresh_interval">Page Refresh interval (10-60 seconds)</label>
                            <input type="number" class="form-control" id="refresh_interval" placeholder="(10-60)">
                        </div>

                        <div class="form-group">
                            <h5>Date ranges to display earnings for</h5>
                            <label class="checkbox-inline">
                                <input data-timespan="Hour" type="checkbox"> Hourly
                            </label>
                            <label class="checkbox-inline">
                                <input data-timespan="Day" type="checkbox"> Daily
                            </label>
                            <label class="checkbox-inline">
                                <input data-timespan="Week" type="checkbox"> Weekly
                            </label>
                            <label class="checkbox-inline">
                                <input data-timespan="Month" type="checkbox"> Monthly
                            </label>
                            <label class="checkbox-inline">
                                <input data-timespan="Year" type="checkbox"> Yearly
                            </label>
                        </div>

                        <div class="form-group">
                            <h5>Bitcoin Display Unit</h5>
                            <label class="radio-inline">
                                <input value="BTC" type="radio" name="btcDisplayUnit"> BTC
                            </label>
                            <label class="radio-inline">
                                <input value="mBTC" type="radio" name="btcDisplayUnit"> mBTC
                            </label>
                            <label class="radio-inline">
                                <input value="Bits" type="radio" name="btcDisplayUnit"> Bits
                            </label>
                            <label class="radio-inline">
                                <input value="Satoshi" type="radio" name="btcDisplayUnit"> Satoshi
                            </label>
                        </div>

                        <div class="form-group">
                            <h5>Which earnings are displayed in selected output currency</h5>
                            <label class="radio-inline">
                                <input value="all" type="radio" name="outputCurrencyDisplayMode"> All Coins
                            </label>
                            <label class="radio-inline">
                                <input value="summary" type="radio" name="outputCurrencyDisplayMode"> Only Summary
                            </label>
                        </div>

                        <div class="form-group">
                            <h5>Effective loan rates calculation</h5>
                            <p class="small">Effective rate can either take into consideration the actual amount actively lent OR consider only exchange 15% fee</p>
                            <label class="radio-inline">
                                <input value="lentperc" type="radio" name="effRateMode"> Fee and Effective Lent
                            </label>
                            <label class="radio-inline">
                                <input value="onlyfee" type="radio" name="effRateMode"> Fee Only
                            </label>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="doSave()">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>

</html>
